<style lang="less">
@import "./home.less";
@import "../../styles/common.less";
</style>
<template>
  <div class="home-main">
    <Row :gutter="10">
      <Col :md="24" :lg="8">
        <Row class-name="home-page-row1" :gutter="10">
          <Col :style="{marginBottom: '10px'}">
            <Card>
              <Row type="flex" class="user-infor">
                <Col span="8">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <img class="avator-img" :src="avatorPath">
                  </Row>
                </Col>
                <Col span="8" style="padding-left:6px;">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <div>
                      <b class="card-user-infor-name">{{baseuser.name}}</b>
                      <p>{{baseuser.phone}}</p>
                    </div>
                  </Row>
                </Col>
                <Col span="8">
                  <Row class-name="made-child-con-middle" type="flex" align="middle">
                    <generate-guide ref="generateGuide"></generate-guide>
                  </Row>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
      </Col>
      <Col :md="24" :lg="16">
        <Row :gutter="5">
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <infor-card
              id-name="member_count"
              :end-val="count.member"
              iconType="android-person"
              color="#2d8cf0"
              intro-text="会员数量"
            ></infor-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <infor-card
              id-name="prize_count"
              :end-val="count.prize"
              iconType="trophy"
              color="#64d572"
              :iconSize="50"
              intro-text="奖状数量"
            ></infor-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <infor-card
              id-name="back_count"
              :end-val="count.back"
              iconType="image"
              color="#ffd572"
              intro-text="背景数量"
            ></infor-card>
          </Col>
          <Col :xs="24" :sm="12" :md="6" :style="{marginBottom: '10px'}">
            <infor-card
              id-name="model_count"
              :end-val="count.model"
              iconType="document"
              color="#f25e43"
              intro-text="模板数量"
            ></infor-card>
          </Col>
        </Row>
      </Col>
    </Row>
    <Row :gutter="10" class="margin-top-10">
      <Col :md="24" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="android-map"></Icon>七日内奖状下载状况
          </p>
          <div class="data-source-row">
            <visite-volume></visite-volume>
          </div>
        </Card>
      </Col>
      <Col :md="24" :lg="12" :style="{marginBottom: '10px'}">
        <Card>
          <p slot="title" class="card-title">
            <Icon type="ios-pulse-strong"></Icon>获奖人员年龄统计
          </p>
          <div class="data-source-row">
            <data-source-pie></data-source-pie>
          </div>
        </Card>
      </Col>
    </Row>
    <Row class="margin-top-10">
      <Card>
        <p slot="title" class="card-title">
          <Icon type="ios-shuffle-strong"></Icon>七日内新增奖状状况
        </p>
        <div class="line-chart-con">
          <service-requests></service-requests>
        </div>
      </Card>
    </Row>
    <Row class="margin-top-10">
      <Card>
        <p slot="title" class="card-title">
          <Icon type="ios-pulse-strong"></Icon>七日内新增会员状况
        </p>
        <div class="line-chart-con">
          <service-member></service-member>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
import homeMap from "./components/map.vue";
import dataSourcePie from "./components/dataSourcePie.vue";
import visiteVolume from "./components/visiteVolume.vue";
import serviceRequests from "./components/serviceRequests.vue";
import serviceMember from "./components/serviceMember.vue";
import userFlow from "./components/userFlow.vue";
import inforCard from "./components/inforCard.vue";
import mapDataTable from "./components/mapDataTable.vue";
import toDoListItem from "./components/toDoListItem.vue";
import GenerateGuide from './components/generateGuide/generateGuide.vue'

import util from "@/libs/util";
import Cookies from "js-cookie";

export default {
  name: "home",
  components: {
    homeMap,
    dataSourcePie,
    visiteVolume,
    serviceRequests,
    userFlow,
    inforCard,
    mapDataTable,
    toDoListItem,
    GenerateGuide,
    serviceMember
  },
  data() {
    return {
      baseuser: JSON.parse(Cookies.get("baseUser")),
      count: {
        member: 0,
        prize: 0,
        back: 0,
        model: 0
      }
    };
  },
  computed: {
    avatorPath() {
      return localStorage.avatorImgPath;
    }
  },
  mounted() {
    this.loadMember();
    this.loadPrize();
    this.loadBack();
    this.loadModel();
    this.isNew();
  },
  methods: {
    loadMember() {
      util.ajax
        .post(
          "/busine/member/findAll",
          util.toFormData({
            orgid: this.baseuser.orgId
          })
        )
        .then(res => {
          this.count.member = res.data.data.length;
        });
    },
    loadPrize() {
      util.ajax
        .post(
          "/busine/prizes/findAll",
          util.toFormData({
            orgid: this.baseuser.orgId
          })
        )
        .then(res => {
          this.count.prize = res.data.data.length;
        });
    },
    loadBack() {
      util.ajax
        .post(
          "/busine/background/findAll",
          util.toFormData({
            organizeid: this.baseuser.orgId
          })
        )
        .then(res => {
          this.count.back = res.data.data.length;
        });
    },
    loadModel() {
      util.ajax
        .post(
          "/busine/model/findByOrg",
          util.toFormData({
            organizeid: this.baseuser.orgId
          })
        )
        .then(res => {
          this.count.model = res.data.data.length;
        });
    },
    isNew() {
        util.ajax.post("/busine/organize/isNew",util.toFormData({
            id: this.baseuser.orgId
        })).then(res => {
            if (res.data.code == '200') {
                let charge = res.data.data.charge;
                let themes = res.data.data.themes;
                let prizes = res.data.data.prizes;
                let members = res.data.data.members;
                if (themes.length <= 0 && prizes.length <= 0 && members.length <= 0) {
                    this.$refs.generateGuide.guideConfirmationVisible = true;
                } else {
                    if (charge) {
                        let message = '';
                        let themesun = charge.themesun;
                        let freediploma = charge.freediploma;
                        if (themesun < themes.length) {
                            message = '主题数已超出套餐中免费主题数，如需继续使用请联系管理员';
                        }
                        if (freediploma < prizes.length) {
                            message = '奖状数已超出套餐中免费奖状数，如需继续使用请联系管理员';
                        }
                        if (message != '') {
                            this.$Modal.error({
                                content: message,
                                onOk: () => {
                                    // 退出登录
                                    this.$store.commit('logout', this);
                                    this.$store.commit('clearOpenedSubmenu');
                                    this.$router.push({
                                        name: 'login'
                                    });
                                },
                                onCancel: () => {
                                    // 退出登录
                                    this.$store.commit('logout', this);
                                    this.$store.commit('clearOpenedSubmenu');
                                    this.$router.push({
                                        name: 'login'
                                    });
                                }
                            });
                        }
                    }
                }
            } else {

            }
        });
    }
  }
};
</script>
